@import url(http://fonts.googleapis.com/css?family=Roboto:100);
@charset "UTF-8";
/* CSS Document */
.appearance{
	filter:hue-rotate(270deg) saturate(40%);
	-webkit-filter:hue-rotate(270deg) saturate(40%);
	
	}
.joke input:checked + label,
.joke input:checked + label:hover,
.joke input:checked + label a.linkitem, 
.joke input:checked + label a.linkitem:hover
{
	background: #FF0;
	color: #000;
}


.slant input:checked + label a.overunderline 

{
	background: #FFF;
	color: #000;
	}
.slant input {
	display: none;
	}

body.poetic {
	background-color: rgba(252,237,244,.5);
	}

.poetrylistheader {
	
	color: rgba(0,0,0,.5);
	font-style:italic;
	font-size: 12px;
	}

.poemtitles {
	
	
	color: rgba(0,0,153,.6);
	background-color: rgba(255,255,0,.1);
	list-style-type: none;
	margin-left: 150px;
	padding-top: 10px;
	
	width: 350px;
	height: 100%; /* vh is viewport height (browser window height) 100 is 100%.  Number can be lower for lower perccent.*/
	font-size: 12px;
	float: left;
	position:fixed;
	z-index:10;
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
	
	
	}
	
	
.slant {
	font-family: nixie-one, serif;  /*a nice courier style typeface... ADOBE's IS BETTER THAN GOOGLE'S: PUT THE FOLLOWING IN HEAD of ALL POEM PAGES: <script src="//use.edgefonts.net/nixie-one.js"></script> */
	letter-spacing: 3px;
	line-height: 22px;
	/* Safari */
-webkit-transform: rotate(-7deg);

/* Firefox */
-moz-transform: rotate(-7deg);

/* IE */
-ms-transform: rotate(-7deg);

/* Opera */
-o-transform: rotate(-7deg);
	
	}	

.slant:before {
	content:"\2014"; /* "\2014" is code for an &mdash; ..go to http://css-tricks.com/snippets/html/glyphs/*/
	} 
	

.slantheader {
	font-family: nixie-one, serif;  /*a nice courier style typeface... ADOBE's IS BETTER THAN GOOGLE'S: PUT THE FOLLOWING IN HEAD of ALL POEM PAGES: <script src="//use.edgefonts.net/nixie-one.js"></script> */
	letter-spacing: 3px;
	line-height: 22px;
	/* Safari */
-webkit-transform: rotate(-7deg);

/* Firefox */
-moz-transform: rotate(-7deg);

/* IE */
-ms-transform: rotate(-7deg);

/* Opera */
-o-transform: rotate(-7deg);
	
	}

.prestyle {
	font-family: 'Roboto', sans-serif;
	font-weight: 100;
	opacity: 1;
	-webkit-font-smoothing: antialiased;
	line-height: 27px;
	letter-spacing: 1px;
	font-size:22px;
	}
	
pre {
	font-family: 'Roboto', sans-serif;
	font-weight: 100;
	opacity: 1;
	-webkit-font-smoothing: antialiased;
	line-height: 27px;
	letter-spacing: 1px;
	font-size:22px;
	}
	
.poembody {   /*THIS IS FOR SECTION WHICH ENCLOSES the .poesis DIV which holds the content*/
	
	font-family: 'Roboto', sans-serif;
	font-weight: 100;
	opacity: 1;
	-webkit-font-smoothing: antialiased;
	line-height: 27px;
	letter-spacing: 1px;

	margin-left: 499px; /*at 499 margin it overlaps the poem titles by 1px which forces safari's stacking order glitch to put the poem on top!*/
/* no overlow:auto.. it causes trouble in firefox with double scrolling bars--so leave it out and let the browser provide the scroll bars....*/
	font-size:22px;
	float: left;
	position: relative;
	height: 100%; /* vh is viewport height (browser window height) 100 is 100%.  Number can be lower for lower perccent.*/
	width: 85vw; /*these viewport rules for w and h, make the poem float around the page at the touch of the trackpad.*/
	-webkit-overflow-scrolling: touch;
	z-index:20;
	}

.poesis {   /*this is to control the inner div that holds the poem, that way, the background color stays with the div and isn't tied to the dimensions of the viewport like .poembody is...*/
	padding: 60px 30px 50px 30px;
	background-color: rgba(226,255,235,.8);
	position: relative;
	
	/*border-left: solid; border-width:4px; border-color:#FFFFFF;*/
	}
/*
#currentpoem {
	background-color: rgba(255,255,255,1);
}
*/
a.overunderline {
	color: inherit;
	text-decoration: none;
	}
	
a.overunderline:hover {
	color: blue;
	font-family: nixie-one, serif;
	font-style: italic; 
	}
	
a.overundeline:visited {
	color: rgba(204,153,51,1);  /*not working YET*/
	}